<!-- 右侧抽屉组件 -->
<script setup lang="ts">
const loading = ref(false)

const visibleDrawer = ref(false)
defineProps({
  title: String,
  size: {
    type: String,
    default: '30%'
  },
  destroyOnClose: {
    type: Boolean,
    default: false
  },
  confirmText: {
    type: String,
    default: '提交'
  }
})

const emit = defineEmits(['submit'])

const submit = () => {
  emit('submit')
}
const showDrawer = () => {
  visibleDrawer.value = true
}
const hideDrawer = () => {
  visibleDrawer.value = false
}
const showLoading = () => (loading.value = true)
const hideLoading = () => (loading.value = false)

defineExpose({
  showDrawer,
  hideDrawer,
  showLoading,
  hideLoading
})
</script>

<template>
  <el-drawer v-model="visibleDrawer" :title="title" :size="size" :close-on-click-modal="false" :destroy-on-close="destroyOnClose">
    <div class="formDrawer">
      <div class="body">
        <slot></slot>
      </div>
      <div class="actions">
        <el-button type="primary" :loading="loading" @click="submit">{{ confirmText }}</el-button>
        <el-button type="default" @click="hideDrawer">取消</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<style lang="scss" scoped>
.formDrawer {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;

  .body {
    flex: 1;
    overflow-y: auto;
  }

  .actions {
    height: 50px;
    display: flex;
    justify-content: center;
    padding: 10px;
  }
}
</style>
